<template>
  <el-row>
    <el-row justify="start" style="margin-bottom: 10px">
      <el-select v-model="clusterId" placeholder="请选择集群">
        <el-option
          v-for="item in flinkOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <el-tag effect="dark">
            {{ item.type }}
          </el-tag>
          <b :style="{ marginLeft: '20px' }">
            {{ item.label }}
          </b>
        </el-option>
      </el-select>
      <el-button
        type="primary"
        icon="el-icon-refresh-right"
        circle
        :style="{ marginLeft: '15px' }"
        @click="getProcess"
      />
    </el-row>
    <el-row>
      <el-table :data="data" border style="width: 100%">
        <el-table-column
          v-for="item in columns"
          :key="item.name"
          :prop="item.prop"
          :label="item.label"
          :formatter="item.formatter"
          :width="item.width"
        />
        <el-table-column fixed="right" label="操作" width="160px">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                v-if="scope.row.state == 'RUNNING'"
                size="small"
                type="primary"
                class="table-btn"
                @click="Stop(scope.row)"
              >
                停止
              </el-button>
              <el-dropdown
                v-if="scope.row.state == 'RUNNING'"
                split-button
                type="primary"
                @command="(command) => onItemClick(scope.row, command)"
              >
                更多
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="trigger">
                    trigger
                  </el-dropdown-item>
                  <el-dropdown-item command="stop">
                    stop
                  </el-dropdown-item>
                  <el-dropdown-item command="cancel">
                    cancel
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </el-row>
</template>

<script>
import moment from 'moment'
import {
  queryListJobs,
  cancelProcess,
  saveProcess,
  stopProcess,
  savepointCancel,
  queryTaskParams
} from '../api/workDevelopment'

export default {
  name: 'Process',
  props: {
    taskId: { type: Number },
  },
  data() {
    return {
      flinkOptions: [],
      columns: [
        { label: '作业id', prop: 'jid', width: '250px' },
        { label: '作业名', prop: 'name' },
        {
          label: '开始时间',
          prop: 'start-time',
          formatter: (row) => {
            return moment(row['start-time']).format('YYYY-MM-DD HH:mm:ss')
          }
        },
        {
          label: '结束时间',
          prop: 'end-time',
          formatter: (row) => {
            return moment(row['end-time']).format('YYYY-MM-DD HH:mm:ss')
          }
        },
        {
          label: '耗时',
          prop: 'duration',
          formatter: (row) => {
            return row.duration / 1000 + 's'
          }
        },
        { label: '状态', prop: 'state' },
        {
          label: '最后修改时间',
          prop: 'last-modification',
          formatter: (row) => {
            return moment(row['last-modification']).format('YYYY-MM-DD HH:mm:ss')
          }
        }
      ],
      data: [],
      loading: false,
      value: '',
      clusterId: ''
    }
  },
  watch: {
    clusterId: {
      handler() {
        this.getProcess()
      }
    }
  },
  mounted() {
    this.queryTaskParamsHandle()
  },
  methods: {
    // 查群集群列表
    async queryTaskParamsHandle() {
      const res = await queryTaskParams({
        taskId: this.taskId
      })
      this.flinkOptions = res.clusterInStanceData.map((item) => {
        return {
          type: item.type,
          label: item.name,
          value: item.id
        }
      })
      this.clusterId = this.flinkOptions[0] ? this.flinkOptions[0].value : ''
    },
    // 更多不同的操作trigger/stop/cancel
    onItemClick(param, value) {
      if (param.state !== 'RUNNING') {
        return
      }
      if (value === 'trigger') {
        this.savepointTrigger(param)
      } else if (value === 'stop') {
        this.savepointStop(param)
      } else if (value === 'cancel') {
        this.savepointCancel(param)
      }
    },
    async savepointTrigger(param) {
      const clusterId = this.clusterId
      const res = await saveProcess({
        clusterId,
        jobId: param.jid
      })
      if (res) {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
      }
      this.getProcess()
    },
    async savepointStop(param) {
      const clusterId = this.clusterId
      const res = await stopProcess({
        clusterId,
        jobId: param.jid
      })
      if (res) {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
      }
      this.getProcess()
    },
    async savepointCancel(param) {
      const clusterId = this.clusterId
      const res = await savepointCancel({
        clusterId,
        jobId: param.jid
      })
      if (res) {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
      }
      this.getProcess()
    },
    getProcess() {
      queryListJobs({ clusterId: this.clusterId }).then((res) => {
        if (res) {
          this.data = res
        }
      })
    },
    studioCancel(id, jobId) {
      cancelProcess({
        clusterId: id,
        jobId
      }).then((res) => {
        if (res) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        }
        this.getProcess()
      })
    },
    Stop(param) {
      if (param.state === 'CANCELED') {
        return
      }
      this.$confirm('您确定停止作业吗？?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const clusterId = this.clusterId
        this.studioCancel(clusterId, param.jid)
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    }
  }
}
</script>
